<template>
    <div class="img-verify">
        <canvas ref="verify" :width="width" :height="height" @click="handleDraw"></canvas>
    </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue';

export default {
    setup() {
        const verify = ref(null);
        const state = reactive({
            pool: 'QWERTYUIOPLKJHGFDSAZXCVBNM1234567890',
            width: 120,
            height: 40,
            imgCode: ''
        })
        onMounted(() => {
            state.imgCode = draw();
        })
        const handleDraw = () => {
            state.imgCode = draw();
        }
        const randomNum = (min, max) => {
            return parseInt(Math.random() * (max - min) + min)
        }
        const randomColor = (min, max) => {
            const r = randomNum(min, max);
            const g = randomNum(min, max);
            const b = randomNum(min, max);
            return `rgb(${r},${g},${b})`
        }
        const draw = () => {
            const ctx = verify.value.getContext('2d');
            //设置颜色
            ctx.fillStyle = randomColor(180, 230);
            // 设置左上角位置和宽高
            ctx.fillRect(0, 0, state.width, state.height);
            let imgCode = '';
            for (let i = 0; i < 4; i++) {
                const text = state.pool[randomNum(0, state.pool.length)]
                imgCode += text;
                const fontSize = randomNum(18, 40);
                const deg = randomNum(-30, 30);
                // 绘制文本的样式
                ctx.font = fontSize + 'px Simhei'
                // 基线对齐选项
                ctx.textBaseline = 'top';
                //设置颜色
                ctx.fillStyle = randomColor(80, 150);
                // 保存画布 (canvas) 的所有状态
                ctx.save();
                // translate() 方法重新映射画布上的 (0,0) 位置。
                ctx.translate(30 * i + 15, 15);
                // 旋转当前的绘图
                ctx.rotate((deg * Math.PI) / 180);
                // 在指定的 (x,y) 位置填充指定的文本text
                ctx.fillText(text, -15 + 5, -15);
                // save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。
                ctx.restore();
            }
            for (let i = 0; i < 5; i++) {
                // beginPath() 方法开始一条路径，或重置当前的路径
                ctx.beginPath();
                // 把路径移动到画布中的指定点，不创建线条  相当于起始点
                ctx.moveTo(randomNum(0, state.width), randomNum(0, state.height));
                // 添加一个新点，然后在画布中创建从该点到最后指定点的线条  相当于终点
                ctx.lineTo(randomNum(0, state.width), randomNum(0, state.height));
                // 路径颜色
                ctx.strokeStyle = randomColor(180, 230);
                // 创建从当前点回到起始点的路径
                ctx.closePath();
                // 进行绘制
                ctx.stroke();
            }

            for (let i = 0; i < 40; i++) {
                ctx.beginPath();
                // arc() 方法创建弧/曲线（用于创建圆或部分圆）。
                ctx.arc(randomNum(0, state.width), randomNum(0, state.height), 1, 0, 2 * Math.PI)
                ctx.closePath();
                ctx.fillStyle = randomColor(150, 200);
                // fill() 方法填充当前的图像
                ctx.fill();
            }
            return imgCode
        }

        return {
            ...toRefs(state),
            verify,
            handleDraw,
        }
    }
}
</script>

<style type="text/css">
.img-verify canvas {
    cursor: pointer;
}
</style>